<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">音乐列表</div>
            <div class="layui-card-body">
                <table id="musiclist" lay-filter="musicFilter"></table>
            </div>
        </div>
    </div>

    <script src="../res/layui/layui.js"></script>
    <script>
        layui.use(function () {
            //获取模块对象
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;
            var util = layui.util;
            var form = layui.form;

            //渲染数据表格
            table.render({
                elem: '#musiclist',
                url: 'http://127.0.0.1:8080/music/list',
                size: 'sm',
                page: { //分页配置
                    curr: 1,
                    limit: 10,
                    limits: [5, 10, 20, 30]
                },
                cols: [[
                    { type: 'checkbox' },
                    { type: 'numbers', title: '序号' },
                    { title: '封面', templet: '<div><img src="{{d.ablumImg}}" height="50px"></div>' },
                    { title: '歌曲名', field: 'name' },
                    { title: '流派', field: 'style' },
                    { title: '专辑名', field: 'ablumName' },
                    { title: '发行时间', templet: '<div>{{layui.util.toDateString(d.releaseDate,"yyyy年MM月dd日")}}</div>' },
                    { title: '文件大小', templet: '<div>{{(d.size/(1024*1024)).toFixed(1)}}MB</div>' },
                    {
                        title: '时长', templet: function (d) {
                            let date = new Date(d.duration);
                            let m = date.getMinutes();
                            let s = date.getSeconds();
                            return `${m}分${s}秒`;
                        }
                    },
                    { title: '歌手', field: 'singerName' },
                    { title: '操作', templet: '#rowTools', width: 300 }
                ]]
            })

            //为表格行绑定事件
            table.on('tool(musicFilter)', function (obj) {
                //获取事件名
                let e = obj.event
                switch (e) {
                    case 'addlist':
                        //加入歌单
                        layer.open({
                            type: 1,
                            offset: 'r',
                            title:'选择需要加入的歌单',
                            anim: 'slideLeft', // 从右往左
                            area: ['320px', '100%'],
                            shade: 0.1,
                            shadeClose: true,
                            id: 'ID-demo-layer-direction-r',
                            content: '<div style="padding: 16px;" class="layui-btn-container"></div>',
                            success:function(layero,index,that){
                                 //发送ajax请求，查询所有歌单列表
                                 $.get('http://127.0.0.1:8080/musiclist/listAll',function(resp){
                                        //获取所有歌单
                                        let list = resp.data
                                        //循环遍历歌单
                                        $.each(list,(i,e)=>{
                                            //创建一个按钮对象
                                            let btn = $(`<button class="layui-btn layui-bg-blue layui-btn-fluid">${e.name}</button>`)
                                            //将按钮加入弹层中
                                            layero.find('#ID-demo-layer-direction-r>.layui-btn-container').append(btn)
                                            //为按钮绑定点击事件完成加入歌单请求
                                            btn.on('click',function(){
                                                //获取当前歌曲id
                                                let mid = obj.data.id
                                                //获取歌单id
                                                let listId = e.id
                                                let data = {
                                                    listId:listId,
                                                    mid:mid
                                                }
                                                //发送ajax请求
                                                $.post('http://127.0.0.1:8080/listdetails/add',data,function(resp){
                                                    if(resp.code === 0){
                                                        layer.msg(resp.msg,function(){
                                                            layer.closeAll()
                                                        })
                                                    }else{
                                                        layer.alert(resp.msg,{icon:0})
                                                    }
                                                })
                                            })
                                        })
                                 })       
                            }
                        });
                        break
                    case 'details':
                        layer.msg('查看详情，待实现')
                        break
                    case 'edit':
                        layer.msg('修改，待实现')
                        break
                    case 'del':
                        layer.msg('删除，待实现')
                        break
                }
            })

        })

    </script>
    <!--自定义头工具栏-->
    <script id="toolbar" type="text/html">
    <div class="layui-inline">
        <button class="layui-btn layui-btn-danger" lay-event="dels">
            <i class="layui-icon layui-icon-delete"></i>
            批量删除
        </button>
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" class="layui-input" id="keyword" placeholder="请输入查询关键字">
        </div>
        <button class="layui-btn layui-btn-normal" lay-event="search">
            <i class="layui-icon layui-icon-search"></i>
            搜索
        </button>
    </div>
</script>
    <!--自定义行工具栏-->
    <script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="addlist">
            <i class="layui-icon layui-icon-add-1"></i>
            加入歌单
        </button>
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-about"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            编辑
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>

<!--试听按钮的页面模板-->
<script id="preview" type="text/html">
    <button class="layui-btn layui-btn-normal layui-btn-xs preview-btn" lay-event="playOrPause" data-playing="0"
            data-src="{{d.path}}">
        <i class="layui-icon layui-icon-play"></i>
    </button>
</script>


    <!--歌曲详情弹层-->
    <div id="music-details-dialog" style="display: none;padding: 20px">
        <table class="layui-table" lay-even>
            <tr>
                <td rowspan="3"><img src="" class="coverImg" width="100px" alt=""></td>
                <td>歌曲名:</td>
                <td id="musicName">xxx</td>
                <td>专辑:</td>
                <td id="ablumName">xxxx</td>
                <td>歌手：</td>
                <td id="singerName">xxxx</td>
            </tr>
            <tr>
                <td class="layui-elip">发行公司：</td>
                <td id="company" class="layui-elip">xxxx</td>
                <td class="layui-elip">发行时间</td>
                <td id="releaseTime" class="layui-elip">xxxx</td>
                <td>歌曲风格</td>
                <td id="style">xxxx</td>
            </tr>
            <tr>
                <td>文件大小</td>
                <td id="size">xxx</td>
                <td>试听</td>
                <td colspan="3">
                    <audio src="" class="shiting" controls></audio>
                </td>
            </tr>
            <tr>
                <td colspan="7" id="lrc">歌词</td>
            </tr>
        </table>
    </div>

    <!--歌曲编辑弹层-->
    <div id="music-edit-dialog" style="display: none;padding: 20px">
        <form class="layui-form" id="musicInfo" lay-filter="music-info">
            <input type="hidden" name="id">
            <table class="layui-table" lay-even>
                <tr>
                    <td rowspan="3"><img src="" class="coverImg" width="100px" alt=""></td>
                    <td>歌曲名:</td>
                    <td><input type="text" name="name" class="layui-input"></td>
                    <td>专辑:</td>
                    <td>
                        <select name="aid" id="aid" lay-filter="select-filter">
                            <option value="0">匿名</option>
                        </select>
                    </td>
                    <td>歌手：</td>
                    <td><input type="text" name="sname" class="layui-input"></td>
                </tr>
                <tr>
                    <td>发行公司：</td>
                    <td><input type="text" class="layui-input" name="company" readonly></td>
                    <td>发行时间</td>
                    <td><input type="text" class="layui-input" name="releasedate" readonly></td>
                    <td>歌曲风格</td>
                    <td>
                        <select name="style">
                            <option value="流行">流行</option>
                            <option value="摇滚">摇滚</option>
                            <option value="民谣">民谣</option>
                            <option value="电子">电子</option>
                            <option value="轻音乐">轻音乐</option>
                            <option value="爵士">爵士</option>
                            <option value="R&B">R&B</option>
                            <option value="乡村">乡村</option>
                            <option value="中国风">中国风</option>
                            <option value="说唱">说唱</option>
                            <option value="古典">古典</option>
                            <option value="世界音乐">世界音乐</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>文件大小</td>
                    <td><input type="text" class="layui-input" name="size" readonly></td>
                    <td>持续时长</td>
                    <td><input type="text" class="layui-input" name="duration" readonly></td>
                    <td>试听</td>
                    <td>
                        <audio src="" class="shiting" controls></audio>
                    </td>
                </tr>
                <tr>
                    <td colspan="7">
                        <textarea class="layui-textarea" name="lrc"></textarea>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>

</html>